// echart二级页面
// 模态框
//点击span关闭
$(".model-close").bind("click", function () {
    $('#myModal88').modal('hide');
    $(".content-wapper").fadeOut(500);
});


/**
 * 修改项目type标题
 */

if ($("#projectType").val() == "2002") {
    $("title").html("结转项目情况");
    $(".title>span").html("结转项目情况");
} else if ($("#projectType").val() == "") {
    $("title").html("项目节点情况");
    $(".title>span").html("项目节点情况");
} else if($("#projectType").val() == "1"){
    $("title").html("项目节点情况");
    $(".title>span").html("项目节点情况");
}


// 模态框圆
function modelPie(opt, i) {
    var option = {
        // tooltip: {
        //     trigger: "item",
        //     formatter: "{a} <br/>{b} : {c} ({d}%)"
        // },
        //更改圆饼图颜色
        color: ["#3BEDFF", "#2584F5"],
        series: [{
            // name: '访问来源',
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['50%', '50%'],
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        fontSize: '15',
                        fontColor: '#ffffff'
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data: [{
                value: opt.data.smallNodes[i].factTime,
                // name: '0.5'
            },
                {
                    value: opt.data.totalFactTime,
                    // name: '0.2'
                }
            ]
        }]
    };
    var id = "model-pie" + i;
    var _ec = echarts.init(document.getElementById(id));
    _ec.setOption(option);
    window.addEventListener("resize", function () {
        _ec.resize();
    });
}


//各节点信息模态框
$('.chart-detail').on('click', 'p', function () {
    $('#myModal88').modal('show');
    $(".content-wapper").fadeIn(500);
    // showShade();

    //获取参数   data小写
    var nodeId = $(this).data("nodeid");
    var projectId = $(this).data("projectid");
    $.ajax({
        url: '/app/newProject/querySmallNodes',
        type: 'GET',
        dataType: "json",
        data: {nodeId: nodeId, projectId: projectId},
        success: function (result) {
            console.log(result);
            var html = "";
            for (var i = 0; i < result.data.smallNodes.length; i++) {
                var list = result.data.smallNodes[i];
                html += '\
                   <div class="model-detail-item">\
                                  <div class="item-title"><div class="hidden-font" title=' + list.nodeId + list.nodeName + '>' + list.nodeId + " " + list.nodeName + '</div></div>\
                                  <div class="item-left">\
                                       <p>\
                                           <span>责任人</span>\
                                           <span>' + (list.resUser == undefined ? "" : list.resUser) + '</span>\
                                       </p>\
                                       <p>\
                                           <span>责任单位</span>\
                                           <span>' + (list.resDept == undefined ? "" : list.resDept) + '</span>\
                                       </p>\
                                       <p>\
                                           <span>联系电话</span>\
                                           <span>' + (list.resUserPhone == undefined ? "" : list.resUserPhone) + '</span>\
                                       </p>\
                                       <p>\
                                           <span>经办人</span>\
                                           <span>' + (list.operatorUser == undefined ? "" : list.operatorUser) + '</span>\
                                       </p>\
                                       <p>\
                                           <span>联系电话</span>\
                                           <span>' + (list.operatorPhone == undefined ? "" : list.operatorPhone) + '</span>\
                                       </p>\
                                       <p>\
                                           <span>节点状态</span>\
                                           <span>' + (list.status == 0 ? "未开始" : list.status == 1 ? "已开始" : "已完成") + '</span>\
                                       </p>\
                                      <p>\
                                           <span>计划用时</span>\
                                           <span><em>' + (list.planTime == undefined ? "" : list.planTime) + '</em>天</span>\
                                       </p>\
                                       <p>\
                                           <span>实际开始</span>\
                                           <span>' + (list.planBeginDate == undefined ? "" : list.planBeginDate) + '</span>\
                                       </p>\
                                       <p>\
                                           <span>实际结束</span>\
                                           <span>' + (list.factFinishDate == undefined ? "" : list.factFinishDate) + '</span>\
                                       </p>\
                                       <p>\
                                           <span>实际用时</span>\
                                           <span><em>' + (list.factTime == undefined ? "" : list.factTime) + '</em>天</span>\
                                       </p>\
                                   </div>\
                                   <div class="item-right">\
                                       <div class="pie-percent">\
                                           <div class="pie-percent-detail-1">\
                                              <span></span>\
                                              <span>当前节点所花时间</span>\
                                               <span>' + (list.factTime == undefined ? "" : list.factTime) + '天</span>\
                                               <span>' + list.factTime + '天</span>\
                                           </div>\
                                           <div class="pie-percent-detail-2">\
                                               <span></span>\
                                               <span>全部节点共花时间</span>\
                                               <span>' + (result.data.totalFactTime == undefined ? "" : result.data.totalFactTime) + '天</span>\
                                               <span>' + result.data.totalFactTime + '天</span>\
                                           </div>\
                                       </div>\
                                     <div id="model-pie' + i + '"></div>\
                                   </div>\
                               </div> \
                         ';
            }

            $(".item6").html(html);
            for (var i = 0; i < result.data.smallNodes.length; i++) {
                modelPie(result, i);
            }
        }
    })


})


/**
 * 水球图表
 */
function waterBall(opt) {
    var percent = (parseFloat(opt.data.completionRate)) / 100;
    var containers = document.getElementsByClassName('chart');
    var options = [{
        series: [
            {
                animationDuration: 3000,
                type: 'liquidFill',
                data: [{
                    value: percent,
                    itemStyle: {
                        color: '#79C6FF', //内部波动颜色
                        opacity: .75
                    }
                }],
                itemStyle: {
                    shadowBlur: 0
                },
                radius: '96%',
                outline: {
                    show: true,
                    itemStyle: {
                        borderWidth: 2,
                        borderColor: '#187BAC' //轮廓颜色
                    }
                },
                backgroundStyle: {
                    borderWidth: 2,
                    borderColor: '#187BAC',
                    color: 'rgba(255,255,255,.2)'
                },
                label: {
                    color: '#fff', //波浪上文本颜色
                    insideColor: '#fff', //波浪内部字体颜色
                    fontSize: 25
                }
            }]
    }];

    var charts = [];
    var chart = echarts.init(containers[0]);
    options[0].series[0].silent = true;
    chart.setOption(options[0]);
    chart.setOption({
        baseOption: options[0],
        media: [{
            query: {
                maxWidth: 153
            }
        }]
    });
    charts.push(chart);
    window.onresize = charts[0].resize;
}

/**
 * 各节点信息图表
 */
function manyNode(opt) {
    var myChart = echarts.init(document.getElementById('many-node'));
    var option = {
        graphic: {
            type: 'text',
            left: "43%",
            top: "45%",
            style: {
                text: opt.data.eachNodeTime.length + '项',
                textAlign: 'centerr',
                fill: '#fff',
                fontSize: 28
            }
        },
        grid: {
            top: 10,
            bottom: 25,
            right: 10
        },
        series: [
            {
                animationDuration: 3000,
                name: '重大项目行业分类',
                type: 'pie',
                radius: ['50%', '80%'],//内半径，外半径
                center: ["50%", "50%"], //移动圆位置
                avoidLabelOverlap: false,
                label: {
                    normal: {
                        show: false,
                        position: 'center',
                    },
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data: [
                    {
                        value: opt.data.advance,
                        name: '超前',
                        itemStyle: {
                            color: {
                                colorStops: [
                                    {offset: 0, color: '#79CE86'},
                                    {offset: 1, color: "#79CE86"}
                                ],
                            }
                        }

                    },
                    {
                        value: opt.data.normal,
                        name: '正常',
                        itemStyle: {
                            color: {
                                colorStops: [
                                    {offset: 0, color: '#04CDFF'},
                                    {offset: 1, color: "#04CDFF"}
                                ],
                            }
                        }
                    },
                    {
                        value: opt.data.delayed,
                        name: '延期',
                        itemStyle: {
                            color: {
                                colorStops: [
                                    {offset: 0, color: '#F0404D'},
                                    {offset: 1, color: "#F0404D"}
                                ],
                            }
                        }
                    },
                    {
                        value: opt.data.notBegin,
                        name: '未开始',
                        itemStyle: {
                            color: {
                                colorStops: [
                                    {offset: 0, color: 'gray'},
                                    {offset: 1, color: "gray"}
                                ],
                            }
                        }
                    },{
                        value: opt.data.underway,
                        name: '进行中',
                        itemStyle: {
                            color: {
                                colorStops: [
                                    {offset: 0, color: 'yellow'},
                                    {offset: 1, color: "yellow"}
                                ],
                            }
                        }
                    }
                ]
            }
        ]
    };
    var _ec = echarts.init(document.getElementById("many-node"));
    _ec.setOption(option);
    window.addEventListener("resize", function () {
        _ec.resize();
    });
}

//index2页面初始化
function index2Init(result) {
    //饼状图
    manyNode(result);
    var html = "";
    html = '\
                <span data-status="advance" data-projectId=' + result.data.projectId + ' style="margin-bottom:5px;">\
                <em style="color:#79CE86;">●</em>\
            超前:' + result.data.advance + '\
            </span>\
            <span data-status="normal" data-projectId=' + result.data.projectId + '>\
            <em style="color:#04CDFF">●</em>\
            正常:' + result.data.normal + '\
            </span></br>\
            <span data-status="delay" data-projectId=' + result.data.projectId + '>\
            <em style="color:#F0404D;">●</em>\
            延期:' + result.data.delayed + '\
            </span>\
            <span data-status="notbegin" data-projectId=' + result.data.projectId + '>\
            <em style="color:gray;">●</em>\
            未开始:' + result.data.notBegin + '\
            </span>\
            <span data-status="underway" data-projectId=' + result.data.projectId + '>\
            <em style="color:yellow;">●</em>\
             进行中:' + result.data.underway + '\
            </span>\
            ';
    $(".cahrt-data").html(html);

    //水球区域
    waterBall(result);
    var html1 = "";
    html1 = '\
               <div class="project-title hidden-font" title=' + result.data.name + '>' + result.data.name + '</div>\
                    <div class="project-detail">\
                    <p>\
                    <em>●&nbsp;&nbsp;</em>责任单位\
                <span class="hidden-font" title=' + result.data.resDept + '>' + result.data.resDept + '</span>\
                </p>\
                <p>\
                <em>●&nbsp;&nbsp;</em>启动时间\
                <span>' + result.data.createDate + '</span>\
                </p>\
                <p>\
                <em>●&nbsp;&nbsp;</em>计划完成时间\
                <span>' + result.data.planCompleteDate + '</span>\
                </p>\
                <p>\
                <em>●&nbsp;&nbsp;</em>完成节点\
                <span>' + result.data.completeNode + ' / ' + result.data.totalNode + '</span>\
                </p>\
        </div>\
        ';
    $(".middle-top").html(html1);
    // 柱状图
    nodeTime(result);

    //   项目大节点
    var html2 = "";

    for (var i = 0; i < result.data.eachNodeTime.length; i++) {
        var list = result.data.eachNodeTime[i];
        html2 += '\
                        <p class="hidden-font"  data-nodeId=' + list.nodeId + ' data-projectId=' + result.data.projectId + ' title=' + list.bigNodeName + '>\
                            <em>' + (list.completionStatus == "normal" ? "●&nbsp;" : "") + '</em>\
                            <em>' + (list.completionStatus == "advance" ? "●&nbsp;" : "") + '</em>\
                            <em>' + (list.completionStatus == "delayed" ? "●&nbsp;" : "") + '</em>\
                            <em>' + (list.completionStatus == "notBegin" ? "●&nbsp;" : "") + '</em>\
                            <em>' + (list.completionStatus == "underway" ? "●&nbsp;" : "") + '</em>\
                            ' + list.nodeId + ". " + list.bigNodeName + '\
                         </p>\
                    '
    }
    $(".item2").html(html2);
}

var firstProjectId = $("#firstProjectId").val();
//index2页面初始化加载数据
$.ajax({
    url: '/app/newProject/chart2PlaneNewProjectDetail',
    type: 'GET',
    dataType: "json",
    data: {id: firstProjectId},
    success: function (result) {
        index2Init(result);
    }
})


/**
 * 搜索项目
 */
$(".searchs-btn").click(function () {
    var name = $("#searchs").val();
    $.ajax({
        url: '/app/newProject/chart2PlaneNewProject',
        type: 'GET',
        dataType: "json",
        data: {name: name, projectType: project_type},
        success: function (result) {
            var html = "";
            var htmlData = result.data;
            if (htmlData != undefined) {
                for (var i = 0; i < htmlData.length; i++) {
                    var view = "<div class='main-left-item' data-id=\"" + htmlData[i].sysId + "\" onclick='projectDetail(\"" + htmlData[i].sysId + "\")'>\n" +
                        "                    <p class='hidden-font' title=" + htmlData[i].name + ">" + htmlData[i].name + "</p>\n" +
                        "                    <p>分管领导：" + htmlData[i].resUser + "</p>\n" +
                        "                    <p class='hidden-font' title=" + htmlData[i].resDept + ">责任单位：" + htmlData[i].resDept + "</p>\n" +
                        "                    <div class='progress'>\n" +
                        "                        <div class='progress-bar' style='width: " + htmlData[i].completionRate + ";border-radius: 20px;'></div>\n" +
                        "                    </div>\n" +
                        "                    <div class='percent'>" + htmlData[i].completionRate + "</div>\n" +
                        "                </div> ";
                    html = html + view;
                }
                $(left_content).html(html);
            } else {
                $(left_content).html("搜索不到该项目！！！");
            }

        }
    })
});


//点击超前，正常，延期加载事件
$(".cahrt-data").on("click", "span", function () {
    var projectId = $(this).data("projectid");

    function nodeInfo(result, nodename, length) {
        var html = "";
        for (var i = 0; i < length; i++) {
            var list = nodename[i];
            html += '\
                        <p class="hidden-font"  data-nodeId=' + list.nodeId + ' data-projectId=' + result.data.projectId + ' title=' + list.bigNodeName + '>\
                            <em>' + (list.completionStatus == "normal" ? "●&nbsp;" : "") + '</em>\
                            <em>' + (list.completionStatus == "advance" ? "●&nbsp;" : "") + '</em>\
                             <em>' + (list.completionStatus == "delayed" ? "●&nbsp;" : "") + '</em>\
                              <em>' + (list.completionStatus == "notBegin" ? "●&nbsp;" : "") + '</em>\
                               <em>' + (list.completionStatus == "underway" ? "●&nbsp;" : "") + '</em>\
                            ' + list.nodeId + ". " + list.bigNodeName + '\
                         </p>\
                    '
        }
        $(".item2").html(html);
    }

    //判断
    if ($(this).data("status") == "advance") {
        $.ajax({
            url: '/app/newProject/chart2PlaneNewProjectDetail',
            type: 'GET',
            dataType: "json",
            data: {id: projectId},
            success: function (result) {
                var nodename = result.data.advanceList;
                var length = nodename.length;
                nodeInfo(result, nodename, length);
            }
        })
    } else if ($(this).data("status") == "normal") {
        $.ajax({
            url: '/app/newProject/chart2PlaneNewProjectDetail',
            type: 'GET',
            dataType: "json",
            data: {id: projectId},
            success: function (result) {
                var nodename = result.data.normalList;
                var length = nodename.length;
                nodeInfo(result, nodename, length);
            }
        })
    } else if ($(this).data("status") == "delay") {
        $.ajax({
            url: '/app/newProject/chart2PlaneNewProjectDetail',
            type: 'GET',
            dataType: "json",
            data: {id: projectId},
            success: function (result) {
                var nodename = result.data.delayedList;
                var length = nodename.length;
                nodeInfo(result, nodename, length);
            }
        })
    } else if ($(this).data("status") == "notbegin") {
        $.ajax({
            url: '/app/newProject/chart2PlaneNewProjectDetail',
            type: 'GET',
            dataType: "json",
            data: {id: projectId},
            success: function (result) {
                var nodename = result.data.notBeginList;
                var length = nodename.length;
                nodeInfo(result, nodename, length);
            }
        })
    }else if ($(this).data("status") == "underway") {
        $.ajax({
            url: '/app/newProject/chart2PlaneNewProjectDetail',
            type: 'GET',
            dataType: "json",
            data: {id: projectId},
            success: function (result) {
                var nodename =result.data.underwayList;
                var length = nodename.length;
                nodeInfo(result,nodename,length );
            }
        })
    }
});


//点击事件
function projectDetail(sysId) {
    $.ajax({
        url: '/app/newProject/chart2PlaneNewProjectDetail',
        type: 'GET',
        dataType: "json",
        data: {id: sysId},
        success: function (result) {
            index2Init(result);
        }
    })
}


/**
 * 各个节点柱状图表
 */
function nodeTime(opt) {
    //接入数据
    var dataArr = [];
    var dataArr1 = [];
    var dataArr2 = [];
    for (var i = 0; i < opt.data.eachNodeTime.length; i++) {
        dataArr.push(opt.data.eachNodeTime[i].bigNodeName);
        dataArr1.push(opt.data.eachNodeTime[i].planTime);
        dataArr2.push(opt.data.eachNodeTime[i].factTime);
    }

    var dom = document.getElementById("nodetime");
    var option = {
        color: [
            {
                colorStops: [
                    {offset: 0, color: '#79C6FF'}, //设置柱状图渐变颜色
                    {offset: 1, color: "#79C6FF"}
                ]
            },
            {
                colorStops: [
                    {offset: 0, color: '#79CE86'},
                    {offset: 1, color: "#79CE86"}
                ],
            }
        ],
        itemStyle: {
            barBorderRadius: [0, 20, 20, 0]  //设置圆角
        },
        barWidth: 10,//柱图宽度
        grid: {//调整位置大小
            left: '7%',
            right: '5%',
            bottom: '3%',
            top: "2%",
            containLabel: true
        },
        xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01],
            show: false
        },
        dataZoom: [//滚动条设置
            {
                type: "slider",
                show: true,
                yAxisIndex: [0],
                left: 0,
                start: 1,
                end: 30,
                minValueSpan: 'horizontal',
                textStyle: {
                    // color:"#fff",
                    fontSize: 1
                }
            },
            // {
            //     type: "slider",
            //     show: true,
            //     xAxisIndex: [0],
            //     left: 50,
            //     bottom:0,
            //     start: 0,
            //     end:100,
            //     minValueSpan: 'horizontal',
            //     textStyle:{
            //         color:"#fff"
            //     }
            // }
        ],
        yAxis: {
            type: 'category',
            data: dataArr,
            axisLine: {
                lineStyle: {
                    color: '#509DEF',
                    width: 2,//这里是为了突出显示加上的
                }
            },
            axisLabel: {
                textStyle: {
                    color: '#fff',//设置y轴字体
                }
            },
        },
        series: [
            {
                animationDuration: 5000,
                name: '计划',
                type: 'bar',
                data: dataArr1,
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            position: 'right',//数据在中间显示
                            formatter: '{c}',//百分比显示
                            color: "#fff"
                        }
                    }
                },
            },
            {
                animationDuration: 5000,
                name: '实际',
                type: 'bar',
                data: dataArr2,
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            position: 'right',//数据在中间显示
                            formatter: '{c}',//百分比显示
                            color: "#fff"
                        }
                    }
                },
            }
        ]
    };

    var _ec = echarts.init(document.getElementById("nodetime"));
    _ec.setOption(option);
    window.addEventListener("resize", function () {
        _ec.resize();
    });
}

//页面左测滚动区域
var left_content = $("#main-left-content");
var project_type = $("#projectType").val();
var sysId = $("#sysId").val();
var status = $("#status").val();
$.ajax({
    type: 'get',
    contentType: "application/json",
    url: '/app/newProject/chart2PlaneNewProject',
    data: {projectType: project_type, sysId: sysId, status: status},
    success: function (result) {
        var html = "";
        var htmlData = result.data;
        for (var i = 0; i < htmlData.length; i++) {
            var view = "<div class='main-left-item' data-id=\"" + htmlData[i].sysId + "\" onclick='projectDetail(\"" + htmlData[i].sysId + "\")'>\n" +
                "                    <p class='hidden-font' title=" + htmlData[i].name + ">" + htmlData[i].name + "</p>\n" +
                "                    <p>分管领导：" + htmlData[i].resUser + "</p>\n" +
                "                    <p class='hidden-font' title=" + htmlData[i].resDept + ">责任单位：" + htmlData[i].resDept + "</p>\n" +
                "                    <div class='progress'>\n" +
                "                        <div class='progress-bar' style='width: " + htmlData[i].completionRate + ";border-radius: 20px;'></div>\n" +
                "                    </div>\n" +
                "                    <div class='percent'>" + htmlData[i].completionRate + "</div>\n" +
                "                </div> ";
            html = html + view;
        }
        $(left_content).html(html);
    }
})








